<template>
  <div class="edit-container">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button round class="search-btn" size="small" icon="search" @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- tabs导航栏 -->
    <van-tabs v-model="active" @click="onRefresh">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- <div v-for="i in 50" :key="i">这是第{{ index }}-{{i}}个内容</div> -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push({path:'/article',query:{id:item.art_id}})" >
              <template #label>
                <div>
                  <van-grid :border="false" :column-num="item.cover.type">
                    <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                      <van-image lazy-load :src="value" />
                    </van-grid-item>
                  </van-grid>
                  <div>
                    <span>{{item.aut_name}}</span>&nbsp;
                    <span>{{item.comm_count}}评论</span>&nbsp;
                    <span>{{item.pubdate | fromNow}}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import {getChannelList,getArticleList} from './home.js'
// 导入moment
import moment from 'moment'
// 设置语言
moment.locale('zh-cn')

export default {
  name: "home",
  data() {
    return {
      active: 0,
      loading: false, //上拉 加载更多动画
      finished: false, //上拉，刷新动画
      list: [], //列表数据
      isLoading: false, //下拉 刷新动画
      channels: [], //频道列表
      timestamp: null,
    };
  },
  async created() {
    // 1.加载频道列表
    let res = await getChannelList()
    console.log(res);
    // 1.1 绑定数据
    this.channels = res.data.data.channels;
  },
  methods: {
    // 上拉加载更多
     async onLoad() {

      // 2.加载文章列表
      // 2.1 判断是不是第一页
      if(!this.timestamp){
        this.timestamp = Date.now()
      }
      // 2.2 请求数据
      let res = await getArticleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // 2.3 绑定数据
      this.timestamp = res.data.data.pre_timestamp;
      this.list.push(...res.data.data.results)
      console.log(res);

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   // （1）加载数据
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

        // 2.4 加载状态结束 关闭加载动画
        this.loading = false;

        // 2.5 数据全部加载完成 最多50条，如果所有元素加载完毕，则停止滚动
        if (this.list.length >= 50) {
          this.finished = true;
        }
      // }, 1000);
    },
    // 下拉刷新时间
    onRefresh() {
      // (1)无条件更新可刷新,清空时间戳
      this.finished = false;
      this.timestamp=null
      // (2)清空当前数据
      this.list = [];
      // (3)重新加载数据
      this.loading = true;
      this.onLoad();
      // (4)关闭下拉刷新动画，否则顶部动画会一直转圈
      this.isLoading = false;
    },
    // tabClick(){
    //   // 3.1 清空列表
    // }
  },
  // 过滤器
  filters: {
    fromNow(value){
      return moment(value).fromNow();
    }
  }
};
</script>

<style lang="less">
.edit-container {
  .van-nav-bar__content {
    background-color: #009afb;
    .van-icon {
      color: #fff;
    }
    .logo {
      height: 30px;
      width: 100px;
      background: url("~@/assets/logo.png") no-repeat;
      background-size: cover;
    }
    .van-nav-bar__right {
      width: 150px;
      .search-btn {
        background-color: #00affd;
        height: 30px;
        width: 100px;
        border: 0;
        color: #fff;
      }
    }
  }
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    z-index: 10;
    width: 100%;
  }
  .van-tabs__content {
    margin-top: 43px;
    margin-bottom: 0;
  }
}
</style>